import React, { useState, useEffect } from 'react'
import { getHaiList } from "../../../../components/api"
import All from "../../../common/ebookTil/index"
import style from "./haizi.module.css"
import { NavLink } from 'react-router-dom'

const { haizi, img, top } = style

export default function Haizi() {
    const [getHaiziList, setHaizi] = useState<any>({})
    const [getHaiziList2, setHaizi2] = useState<any>([])
    const getHaizi = async () => {
        let res = await getHaiList()
        // console.log(res, "zhoui");
        setHaizi(res.data)
        setHaizi2(res.data.book_list)
        // console.log(getHaiziList2, "////");
        // console.log(getHaiziList, ".......");


    }

   
    let a = getHaiziList2.id
    // console.log(a);


    useEffect(() => {
        getHaizi()

    }, [])
    return (
        <div>
            {/* <div>{ getHaiziList.title}</div> */}
            <All title={getHaiziList.title}></All>
            <NavLink to={"/bookdetail/" + getHaiziList.id}>
                <div className={top}>

                    <img className={img} src={getHaiziList.cover} alt="" />
                    <div>
                        <span>{getHaiziList.name}</span>
                        <p>{getHaiziList.brief}</p>
                    </div>

                </div>
            </NavLink>

            {/* <NavLink to={"/bookdetail/" + getHaiziList2.id}> */}
            <div className={haizi}>

                <ul>
                    {
                        getHaiziList2 && getHaiziList2.map((item: any) =>
                            <NavLink to={"/bookdetail/" + item.id}>
                                <li key={item.id}>
                                    <img className={img} src={item.cover}></img>
                                    <p>{item.name}</p>
                                </li>

                            </NavLink>

                        )
                    }
                </ul>

            </div>
            {/* </NavLink> */}



        </div>
    )
}
